import { defineConfig, loadEnv } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'
import eslintPlugin from 'vite-plugin-eslint' // vite对eslint的扩展插件
import { compression } from 'vite-plugin-compression2' // 打包压缩
import UnoCSS from 'unocss/vite'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

/**
 * Vite 配置文件
 * @see URL_ADDRESS * @see https://vite.dev/config/
 */
export default defineConfig(({ mode }) => {
    // 获取到环境变量配置
    const env = loadEnv(mode, process.cwd()) as ImportMetaEnv
    // console.log('项目环境变量：env = ', env)

    return {
        plugins: [
            vue(),
            /** 增加eslint的vite插件，这样在程序运行时就能检查eslint规范 */
            eslintPlugin(),
            // 打包压缩支持
            compression({
                threshold: 10240, // 对 10kb 以上的文件进行压缩
            }),
            UnoCSS(),
            createSvgIconsPlugin({
                // 指定svg图标文件的根目录
                iconDirs: [path.resolve(process.cwd(), 'src/assets/images/svg')],
                // 指定生成后的svg图标名称格式
                symbolId: 'icon-[dir]-[name]',
            }),
        ],
        server: {
            /** 配置开发服务器使用的端口，默认5173 */
            // port: 3000,
            /** 配置host，配置为'0.0.0.0'可以在局域网访问 */
            host: '0.0.0.0',
            /** 配置后端接口代理，处理接口跨域问题 */
            proxy: {
                // 将 VITE_APP_BASE_API 代理到 VITE_APP_BASE_SERVER
                [env.VITE_APP_BASE_API]: {
                    target: env.VITE_APP_BASE_SERVER,
                    changeOrigin: true,
                },
                // // 将 /api 替换为 都转发到 http://xyzgis.com 下
                // '/admin-api': {
                //     target: 'http://xyzgis.com/admin-api',
                //     changeOrigin: true,
                //     ws: true,
                //     secure: false,
                //     rewrite: (path: string) => path.replace(/^\/admin-api/, '/'),
                // },
                // // 将 /api 替换为 都转发到 http://xyzgis.com/api
                // '/api': {
                //     target: 'http://xyzgis.com',
                //     changeOrigin: true,
                // },
            },
        },
        /** 样式处理配置 */
        css: {
            preprocessorOptions: {
                scss: {
                    javascriptEnabled: true,
                    // 配置要动态导入的scss变量和mixin文件
                    additionalData: `
                        @use "@/styles/variables.scss" as *;
                        @use "@/styles/mixin.scss" as *;
                    `,
                },
            },
        },
        /** 配置打包后使用相对路径 */
        base: './',
        build: {
            /** 打包后的输出目录，默认为 dist */
            outDir: './dist',
            /** 打包后的文件内容不进行压缩，方便阅读 */
            // minify: false,
            /** 打包分包配置 */
            rollupOptions: {
                output: {
                    chunkFileNames: 'static/js/[name]-[hash].js',
                    entryFileNames: 'static/js/[name]-[hash].js',
                    assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
                    /**
                     * 打包分块
                     * @param {string} id 资源的id，就是文件的路径
                     * @return {string | void} 分块名称，如果什么都不返回则使用默认值
                     */
                    manualChunks: (id: string) => {
                        // console.log('id', id)
                        // 将所有的第三方库都打包到 vendor 分块中
                        if (id.includes('node_modules')) {
                            return 'vendor'
                        }
                    },
                },
            },
        },
        resolve: {
            /** 配置路径别名 */
            alias: {
                '@': path.resolve(__dirname, './src'),
            },
        },
    }
})
